<template>
  <div class="user-container">
    <div class="header">
      <div>
        <div class="myicon">
          <img src="../assets/images/hospital.jpg" alt="" class="left-img" />
                   <div class="mytitle">
                医+系统
            </div>
          <div>
            <el-dropdown>
                    <span>{{uName}}，您好</span>
            <img
              style="width: 80px; height: 80px; border-radius: 50px;"
              src="../assets/images/chl.gif"
              alt=""
            />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="setPass"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
     
        </div>
        <div>
          <el-menu
            @select="handleSelect"
            mode="horizontal"
            background-color="#6389f6"
            text-color="#fff"
          >
            <el-menu-item
              v-for="(item, index) in menuList"
              :index="item.path"
              :key="index"
              class="mymenu"
            >
              {{ item.mate.title }}
            </el-menu-item>
          </el-menu>
        </div>
      </div>

      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import routerList from "../router/index.js";

export default {
  name: "userMain",
  comName: "用户界面",
  data() {
    return {
      menuList: [],
       uName:sessionStorage.getItem("uName"),
    };
  },
  methods: {
    exit() {
      sessionStorage.removeItem("Token");
      sessionStorage.removeItem("uId");
      this.$router.replace({
        path: "/home/home",
      });
    },
    setPass() {
      this.$router.push({
        path: "/editPassword",
      });
    },
    handleSelect(value) {
            if (this.$route.path === value) {
        return  
      }
      this.$router.push({
        path: value,
      });
    },
  },
  mounted() {
    let routes = [...routerList.options.routes[2].children];

    this.menuList = routes.sort((prev, next) => {
      return prev.mate.sort - next.mate.sort;
    });
  },
};
</script>

<style lang="scss" scoped>
.user-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 100px;

    .myicon {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 30px;
    }

    .mymenu {
      font-size: 18px;
      margin-left: 30px;
    }

    .left-img {
      width: 150px;
      height: 90px;
    }
  }
}

        .mytitle{
             line-height: 90px;
            font-size: 30px;
            color: rgb(113, 157, 223);
            font-weight: bolder;

        }
</style>